diff options
Diffstat (limited to 'src/routes/[lang=lang]')
| -rw-r--r-- | src/routes/[lang=lang]/+page.server.ts | 39 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/+page.svelte | 43 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/contact.svelte | 4 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/description.svelte | 6 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/hero.svelte | 61 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/products.svelte | 15 |
6 files changed, 91 insertions, 77 deletions
diff --git a/src/routes/[lang=lang]/+page.server.ts b/src/routes/[lang=lang]/+page.server.ts index c2284ee..deafae3 100644 --- a/src/routes/[lang=lang]/+page.server.ts +++ b/src/routes/[lang=lang]/+page.server.ts @@ -1,22 +1,31 @@ -import { sanity } from "$lib/sanity-client"; +import { sanity } from "$lib/sanity/client"; import type { PageServerLoad } from "./$types"; import groq from "groq"; import type { ContactModel } from "./sections/contact.svelte"; -import { fromLocalizedString } from "$lib/utils"; import type { HeroModel } from "./sections/hero.svelte"; import type { DescriptionModel } from "./sections/description.svelte"; +import type { s } from "sanity-typed-schema-builder"; +import type contactType from "$lib/sanity/schemas/default/contact"; +import type heroType from "$lib/sanity/schemas/default/hero"; +import type descriptionType from "$lib/sanity/schemas/default/description"; +import type productType from "$lib/sanity/schemas/default/product"; +import type { ProductsModel } from "./sections/products.svelte"; export const load = (async ({ locals }) => { - const contactSection = await sanity.fetch(groq`*[_type == "contact"][0]`); - const heroSection = await sanity.fetch(groq`*[_type == "hero"][0]`); - const descriptionSection = await sanity.fetch(groq`*[_type == "description"][0]`); - const products = await sanity.fetch(groq`*[_type == "product"]`); + const commonParams = { + lang: locals.locale + } + const contactSection: s.infer<typeof contactType> = await sanity.fetch(groq`*[_type == "contact" && __i18n_lang == $lang][0]`, { ...commonParams }) ?? {}; + const heroSection: s.infer<typeof heroType> = await sanity.fetch(groq`*[_type == "hero" && __i18n_lang == $lang][0]`, { ...commonParams }) ?? {}; + const descriptionSection: s.infer<typeof descriptionType> = await sanity.fetch(groq`*[_type == "description" && __i18n_lang == $lang][0]`, { ...commonParams }) ?? {}; + const products: Array<s.infer<typeof productType>> = await sanity.fetch(groq`*[_type == "product" && __i18n_lang == $lang]`, { ...commonParams }) ?? []; + return { contact: { - phone: fromLocalizedString(contactSection.phone, locals.locale), - email: fromLocalizedString(contactSection.email, locals.locale), - phoneHours: fromLocalizedString(contactSection.phoneHours, locals.locale), - addressLines: contactSection.addressLines.map((el: string | object) => fromLocalizedString(el, locals.locale)), + phone: contactSection.phone, + email: contactSection.email, + phoneHours: contactSection.phoneHours, + addressLines: contactSection.addressLines?.map((el: string | object) => el) ?? [], } as ContactModel, hero: { title: heroSection.title, @@ -26,6 +35,14 @@ export const load = (async ({ locals }) => { title: descriptionSection.title, content: descriptionSection.content, } as DescriptionModel, - products: products + products: { + products: products.map((p) => ({ + cost: p.cost, + description: p.description, + duration: p.duration, + orderLink: p.orderLink, + title: p.title + })) + } as ProductsModel }; }) satisfies PageServerLoad; diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte index f2028c6..0ab63ee 100644 --- a/src/routes/[lang=lang]/+page.svelte +++ b/src/routes/[lang=lang]/+page.svelte @@ -3,13 +3,48 @@ import Hero from "./sections/hero.svelte"; import Description from "./sections/description.svelte"; import Products from "./sections/products.svelte"; + import LL from "$i18n/i18n-svelte"; import type { PageData } from "./$types"; export let data: PageData; </script> -<Hero model={data.hero} /> -<Description model={data.description} /> -<Contact model={data.contact} /> -<Products model={data.products} /> +<main> + <section id="hero"> + <div class="hero"> + <Hero model={data.hero} /> + </div> + <div> + <Description model={data.description} /> + </div> + </section> + <section> + <h3 class="mb-3">{$LL.ourServices()}</h3> + <Products model={data.products} /> + </section> + <section> + <Contact model={data.contact} /> + </section> +</main> + +<style> + main { + margin: 0 5vw 2vh 5vw; + display: flex; + flex-direction: column; + } + main section { + margin-bottom: 2vh; + } + + #hero { + display: grid; + grid-template-columns: repeat(2, 50%); + justify-content: space-between; + } + + #hero .hero { + padding: 3.2vw; + } +</style> diff --git a/src/routes/[lang=lang]/sections/contact.svelte b/src/routes/[lang=lang]/sections/contact.svelte index b058180..2898e83 100644 --- a/src/routes/[lang=lang]/sections/contact.svelte +++ b/src/routes/[lang=lang]/sections/contact.svelte @@ -23,9 +23,9 @@ {#if visible} <section class="contact relative z-1"> - <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl"> + <div class="mx-auto"> <div class="mb-8 lg:mb-12"> - <h1 class="text-center">{$LL.contact.title()}</h1> + <h3>{$LL.contact.title()}</h3> </div> <div class="grid grid-cols-12 gap-8 lg:gap-12"> diff --git a/src/routes/[lang=lang]/sections/description.svelte b/src/routes/[lang=lang]/sections/description.svelte index 79a3939..1fc23ab 100644 --- a/src/routes/[lang=lang]/sections/description.svelte +++ b/src/routes/[lang=lang]/sections/description.svelte @@ -1,7 +1,9 @@ <script context="module" lang="ts"> + import type { SanityBlockArray } from "$lib/sanity/types/block-array"; + export type DescriptionModel = { title: string; - content?: any; + content?: SanityBlockArray; }; </script> @@ -19,7 +21,7 @@ </script> {#if visible} - <h3>{model.title}</h3> + <h3 class="mb-3">{model.title}</h3> {#if model.content} <PortableText value={model.content} /> {/if} diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte index 3cdf221..8a874dc 100644 --- a/src/routes/[lang=lang]/sections/hero.svelte +++ b/src/routes/[lang=lang]/sections/hero.svelte @@ -1,7 +1,9 @@ <script context="module" lang="ts"> + import type { SanityBlockArray } from "$lib/sanity/types/block-array"; + export type HeroModel = { title: string; - content?: any; + content?: SanityBlockArray; }; </script> @@ -19,57 +21,8 @@ </script> {#if visible} - <section class="has-section-divider-bottom bg-contrast-low/50"> - <div class="py-20 lg:py-32"> - <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl"> - <div class="text-component"> - <h1>{model.title}</h1> - {#if model.content} - <PortableText value={model.content} /> - {/if} - </div> - </div> - </div> - - <div class="section-divider"> - <svg viewBox="0 0 1920 60" aria-hidden="true"> - <path - class="fill-floor" - d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z" - /> - </svg> - </div> - </section> + <h1>{model.title}</h1> + {#if model.content} + <PortableText value={model.content} /> + {/if} {/if} - -<style lang="postcss"> - :root { - --section-divider-width: 1920; - --section-divider-height: 60; - --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width)); - } - - [class*="has-section-divider"] { - position: relative; - } - - .has-section-divider-bottom { - padding-bottom: var(--section-divider-ratio); - } - - .section-divider { - position: absolute; - bottom: -1px; - left: 0; - width: 100%; - overflow: hidden; - } - .section-divider svg { - position: relative; - display: block; - height: auto; - max-width: none; - width: 102%; - left: -1%; - } -</style> diff --git a/src/routes/[lang=lang]/sections/products.svelte b/src/routes/[lang=lang]/sections/products.svelte index 816e276..a2999dc 100644 --- a/src/routes/[lang=lang]/sections/products.svelte +++ b/src/routes/[lang=lang]/sections/products.svelte @@ -1,4 +1,5 @@ <script context="module" lang="ts"> + import type { SanityBlockArray } from "$lib/sanity/types/block-array"; export type ProductsModel = { products: ProductModel[]; }; @@ -7,13 +8,14 @@ title: string; duration: string; cost: string; - description: string; + description: SanityBlockArray; orderLink: string; }; </script> <script lang="ts"> import CardV4 from "$components/card-v4.svelte"; + import LL from "$i18n/i18n-svelte"; export let model: ProductsModel; @@ -28,14 +30,19 @@ {#if visible} <div class="wrapper"> {#each model.products as product} - <CardV4 description={product.description} title={product.title} /> + <CardV4 description={product.description} title={product.title}> + <div class="flex flex-wrap justify-end align-bottom"> + <a href={product.orderLink} class="btn btn--primary">{$LL.goToBookingPage()}</a> + </div> + </CardV4> {/each} </div> {/if} <style lang="postcss"> .wrapper { - display: grid; - grid-template-columns: repeat(50%); + display: flex; + flex-direction: row; + gap: 1em } </style> |